<template>
  <RouterView/>
</template>
<script setup lang="ts">
import { RouterView, RouterLink, useRouter } from "vue-router";
import { nanoid } from "nanoid";
import { nextTick, watchEffect } from "vue";

let userInfo = {
  username: "admin",
  password: "1234",
  info: {
    username: "root",
    password: "431",
  },
};

let {
  username,
  password,
  info: { username: username1, password: password1 },
} = userInfo;


let arr=[1,2,234,5]
 let maxVal=arr.reduce((pre,cur)=>{
  return Math.max(pre,cur);
},0)
console.log('arr最大值',maxVal);




console.log("info", username1);

let list = [
  {
    name: "ren",
    age: 18,
  },
];
const router = useRouter();

nextTick(() => {
  console.log("nextTick");
});

watchEffect(() => {
  console.log("watchEffect");
});

let response = {
  data: {
    id: nanoid(),
    name: "admin11",
  },
};

let {
  data: { name, id },
} = response;
console.log(name, id);

function gotoAbout() {
  // router.push("/about")
  router.replace({
    name: "About",
    params: {
      name: `${name}+${id}`,
    },
  });
}
</script>
<style scoped lang="scss">
$color: red;

.color {
  width: 50px;
  height: 50px;

  @if $color== "red" {
    font-size: 10px;
  }
}

.active {
  color: red;
  font-weight: bold;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 1px solid red;
}

.box2 {
  @extend .box;
  font-size: 12px;
  margin-top: 20px;
}
</style>
